<template>
    <div class="AccidentDrill">
        <div class="condition flex">
            <div class="condition_List flex">
                <div class="List flex">
                    <div>演练单位</div>
                    <el-input v-model="List.Unit" placeholder="请输入演练单位" />
                </div>
                <div class="List flex">
                    <div>演练年度</div>
                    <el-date-picker v-model="List.Drill_Year" type="year" placeholder="选择演练年度" />
                </div>
                <div class="List flex">
                    <div>演练月份</div>
                    <el-select v-model="List.Drill_Month" placeholder="选择月份">
                        <el-option v-for="month in 12" :key="month" :label="`${month}月`"
                            :value="month < 10 ? `0${month}` : `${month}`" />
                    </el-select>
                </div>
                <div class="List flex">
                    <div>预案名称</div>
                    <el-input v-model="List.PlanName" placeholder="请输入预案名称" />
                </div>
                <div class="List flex">
                    <div>演练状态</div>
                    <el-select v-model="List.Status" placeholder="请选择演练状态">
                        <el-option v-for="item in whetherList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
            </div>
            <div class="condition_Btn flex">
                <div @click="searchChange('重置')">重置</div>
                <div @click="searchChange('查询')">查询</div>
            </div>
        </div>
        <div class="Btn flex">
            <div></div>
            <div class="BtnList flex">
                <div @click="operate('新增')">
                    <i class="el-icon-plus"></i>新增
                </div>
                <div @click="operate('删除')">
                    <i class="el-icon-minus"></i>删除
                </div>
            </div>
        </div>
        <div class="table">
            <el-table :data="tableData" style="width: 100%" height="833px"
                :default-sort="{ prop: '演练月份', order: 'descending' }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="序号" width="60" align="center">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column v-for="item in tableList.slice(0, 1)" :key="item.prop" :prop="item.prop"
                    :label="item.label" :width="item.width" align="center" />
                <el-table-column v-for="item in tableList.slice(1, 3)" :key="item.prop" :prop="item.prop" sortable
                    :label="item.label" :width="item.width" align="center" />
                <el-table-column v-for="item in tableList.slice(3)" :key="item.prop" :prop="item.prop"
                    :label="item.label" :width="item.width" align="center" />
                <el-table-column prop="状态" label="演练状态" width="" align="center">
                    <template slot-scope="scope">
                        <div :class="scope.row.状态 === '0' ? 'incomplete' : 'complete'">
                            {{ scope.row.状态 === '0' ? '未完成' : '已完成' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="60" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Dialog ref="dialog" :title="title" @addEventListener="addEventListener" :List="dialogList" />
    </div>
</template>

<script>
import Dialog from "./AccidentDrill/Dialog.vue";
import dayjs from "dayjs";
import axios from "axios";
export default {
    name: 'AccidentDrill',
    components: {
        Dialog
    },

    data() {
        return {
            List: {
                Unit: '',
                Drill_Year: '',
                Drill_Month: '',
                PlanName: '',
                Status: '',
            },
            whetherList: [
                { value: '1', label: '已完成' },
                { value: '0', label: '未完成' },
            ],
            unitList: [],
            tableData: [],
            tableList: [
                { prop: '演练单位', label: '演练单位', width: '' },
                { prop: '演练年度', label: '演练年度', width: '' },
                { prop: '演练月份', label: '演练月份', width: '' },
                { prop: '预案名称', label: '预案名称', width: '' },
                { prop: '备注', label: '备注', width: '' },
            ],
            title: "",
            multipleSelection: [],
            dialogList: {},
            oldData: {},
        }
    },
    methods: {
        async getTable(obj) {
            const options = {
                method: 'POST',
                url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjyl_bb_zsgc',
                data: {
                    TIP: 'select',
                    SQL: `SELECT Unit '演练单位', Drill_Year '演练年度', Drill_Month '演练月份', PlanName '预案名称', Notes '备注', Status 状态 FROM imp_emergmanage.emergy_drill_plan where Unit LIKE CONCAT('%', '${obj.Unit}', '%') and Drill_Year LIKE CONCAT('%', '${obj.Drill_Year}', '%') and Drill_Month LIKE CONCAT('%', '${obj.Drill_Month}', '%') and PlanName LIKE CONCAT('%', '${obj.PlanName}', '%') and Status LIKE CONCAT('%', '${obj.Status}', '%')`
                }
            };
            axios.request(options).then(response => {
                this.tableData = response.data.data
            }).catch(function (error) {
                console.error(error);
            });
        },
        searchChange(val) {
            if (val === '重置') {
                this.List = {
                    Unit: '',
                    Drill_Year: '',
                    Drill_Month: '',
                    PlanName: '',
                    Status: '',
                }
                this.getTable(this.List)
            } else if (val === '查询') {
                if (this.List.Drill_Year) this.List.Drill_Year = dayjs(this.List.Drill_Year).format('YYYY')
                this.getTable(this.List)
            }
        },
        handleSelectionChange(row) {
            this.multipleSelection = row;
        },
        handleClick(row) {
            this.$refs.dialog.dialogVisible = true;
            this.title = '编辑'
            row.演练年度 = row.演练年度.toString()
            this.dialogList = JSON.parse(JSON.stringify(row));
            this.oldData = JSON.parse(JSON.stringify(row));
        },
        addEventListener(obj, title) {
            if (title === '编辑') {
                const options = {
                    method: 'POST',
                    url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrynb_bb_zsgc',
                    data: {
                        TIP: 'UPDATE',
                        SQL: `UPDATE imp_emergmanage.emergy_drill_plan
                                SET
                                Unit = '${obj.演练单位}', Drill_Year = '${obj.演练年度}', Drill_Month = '${obj.演练月份}',PlanName = '${obj.预案名称}', Notes = '${obj.备注}', Status = '${obj.状态}'
                                WHERE
                                Unit = '${this.oldData.演练单位}' and Drill_Year = '${this.oldData.演练年度}' and Drill_Month = '${this.oldData.演练月份}'and PlanName = '${this.oldData.预案名称}' and Notes = '${this.oldData.备注}'and Status= '${this.oldData.状态}'`
                    }
                };
                axios.request(options).then(response => {
                    console.log(response.data);
                    if (response.data.message === "success") this.$message.success("编辑成功");
                    this.getTable(this.List)
                }).catch(function (error) {
                    console.error(error);
                });
            } else if (title === '新增') {
                const options = {
                    method: 'POST',
                    url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrynb_bb_zsgc',
                    data: {
                        TIP: 'INSERT',
                        SQL: `INSERT INTO imp_emergmanage.emergy_drill_plan (Unit, Drill_Year, Drill_Month, PlanName, Notes, Status) VALUES ('${obj.演练单位}', '${obj.演练年度}', '${obj.演练月份}', '${obj.预案名称}', '${obj.备注}', '${obj.状态}')`
                    }
                };
                axios.request(options).then(response => {
                    if (response.data.message === "success") this.$message.success("添加成功");
                    else this.$message.error("添加失败");
                    this.getTable(this.List)
                }).catch(function (error) {
                    console.error(error);
                });
            }
        },
        operate(val) {
            if (val === '新增') {
                this.$refs.dialog.dialogVisible = true;
                this.title = '新增'
                this.dialogList = {
                    演练单位: "",
                    演练年度: "",
                    演练月份: "",
                    预案名称: "",
                    备注: "",
                    演练状态: "",
                };
            } else if (val === '删除') {
                const list = this.multipleSelection.map(item => {
                    return `('${item.演练单位}', '${item.演练年度}', '${item.演练月份}', '${item.预案名称}', '${item.备注}', '${item.状态}')`;
                }).join(',');
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        message: '请选择要删除的数据',
                        type: 'warning'
                    });
                    return
                } else {
                    this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                        center: true,
                    }).then(() => {
                        const options = {
                            method: 'POST',
                            url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrynb_bb_zsgc',
                            data: {
                                TIP: 'delete',
                                SQL: `delete from imp_emergmanage.emergy_drill_plan WHERE (Unit, Drill_Year, Drill_Month, PlanName, Notes, Status) IN (${list})`
                            }
                        };

                        axios.request(options).then(response => {
                            if (response.data.message === "success") this.$message.success("删除成功");
                            this.getTable(this.List)
                        }).catch(function (error) {
                            console.error(error);
                        });
                    }).catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });

                    });
                }
            }
        },
    },
    mounted() {
        this.getTable(this.List)
    }
}
</script>
<style lang="scss" scoped>
.AccidentDrill {
    width: 100%;
    height: 995px;
    padding: 24px 0;
    font-family: "Source Han Sans CN";
    font-style: normal;

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .condition {
        width: (1672 / 1720) * 100%;
        height: 56px;
        margin: 0 auto 24px;
        border-bottom: 1px solid #165DFF;

        .condition_List {
            width: (1446 / 1672) * 100%;
            height: 32px;
            line-height: 32px;

            .List {
                width: (270 / 1446) * 100%;
                height: 32px;
                line-height: 32px;
                color: #6A788D;
                font-size: 14px;
                font-weight: 400;

                &>div:nth-child(1) {
                    width: 62px;
                    text-align: right;
                }
            }

            ::v-deep .el-input {
                width: 185px !important;
            }

            ::v-deep .el-input--medium .el-input__inner {
                height: 32px !important;
                line-height: 32px !important;
            }

            ::v-deep .el-input--medium .el-input__icon {
                line-height: 32px !important;
            }
        }

        .condition_Btn {
            width: 155px;

            div {
                width: 73px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                font-size: 14px;
                font-weight: 350;
                border-radius: 4px;

                &:hover {
                    cursor: pointer;
                }

                &:nth-child(1) {
                    border: 1px solid #165DFF;
                    color: rgba(22, 93, 255, 0.70);
                }

                &:nth-child(2) {
                    background: #165DFF;
                    color: #FFF;
                    font-weight: 700;
                }
            }
        }
    }

    .Btn {
        width: (1672 / 1720) * 100%;
        margin: 0 auto;

        .BtnList {
            width: 142px;
            height: 24px;

            &>div {
                width: 68px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                border-radius: 4px;

                &:hover {
                    cursor: pointer;
                }

                i {
                    margin-right: 5px;
                }

                &:nth-child(1) {
                    background: #165DFF;
                    color: #FFF;
                    font-size: 14px;
                    font-weight: 700;
                }

                &:nth-child(2) {
                    border: 1px solid #165DFF;
                    color: rgba(22, 93, 255, 0.70);
                    font-size: 14px;
                    font-weight: 350;
                }
            }
        }
    }

    .table {
        width: (1672 / 1720) * 100%;
        margin: 12px auto;

        .incomplete,
        .complete {
            width: 58px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            border-radius: 4px;
            color: #FF7D00;
            font-size: 14px;
            font-weight: 500;
            border: 1px solid #FF7D00;
            margin: 0 auto;
        }

        .complete {
            color: #00B42A;
            border: 1px solid #00B42A;
        }

        ::v-deep .el-table .el-table__header-wrapper th,
        .el-table .el-table__fixed-header-wrapper th {
            background-color: rgba(22, 93, 255, 0.05);
            color: #6A788D;
            font-size: 14px;
            font-weight: 500;
        }

        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
            background: rgba(22, 93, 255, 0.10) !important;
        }
    }
}
</style>